<!--
 * @Descripttion: 
 * @Version: 
 * @Author: kangluon
 * @Date: 2020-06-27 14:20:14
 * @LastEditors: kangluon
 * @LastEditTime: 2020-06-27 15:01:44
-->
<template>
  <div class="vertical-step">
    <ul>
      <li
        class="li"
        @click="chilrenClick(item, index)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="lines">
          <span class="line" :class="isFinsh(index + 1, 'line')"></span>
          <div
            class="center-round"
            :class="isFinsh(index + 1, 'center-round')"
          ></div>
          <span class="line" :class="isFinsh(index + 1, 'line')"></span>
        </div>
        <div class="name" :class="isActive(index + 1)">
          {{ item.label }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    parentClass: {
      type: String
    },
    step: {
      type: Number
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    chilrenClick(item, index) {
      if (this.parentClass === "active") {
        if (index <= this.step) {
          // 成功的部分
        } else {
          // 点击灰色的部分
        }
      } else {
        // 成功的部分
      }
    },
    isActive(index) {
      if (this.parentClass === "active" && this.step === index) {
        return "active-name";
      }
    },
    isFinsh(index, className) {
      if (this.parentClass === "active") {
        if (index < this.step) {
          return `active-${className}`;
        } else if (index === this.step) {
          return `active-${className}`;
        } else {
          return `wait-${className}`;
        }
      } else {
        return `${this.parentClass}-${className}`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$finish: rgba(114, 181, 236, 1);
$finish-8: rgba(114, 181, 236, 0.8);
$finish-5: rgba(114, 181, 236, 0.5);

$active: rgba(30, 48, 212, 1);
$active-8: rgba(30, 48, 212, 0.8);
$active-5: rgba(30, 48, 212, 0.5);

$wait: rgba(53, 56, 59, 1);
$wait-5: rgba(53, 56, 59, 0.5);
$wait-8: rgba(53, 56, 59, 0.8);
.vertical-step {
  // padding-top: 30px;
  padding: 10px 10px 30px;
  ul {
    padding: 0px;
    margin: 0px;
  }
  .li {
    list-style: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    .lines {
      align-items: center;
      .line {
        // flex: 1;
        display: block;
        width: 1px;
        height: 15px;
        margin: 0 auto;
      }
      .finish-line {
        background: $finish;
      }
      .active-line {
        background: $active;
      }
      .wait-line {
        background: $wait;
      }
      .center-round {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: relative;
        &::after {
          position: absolute;
          content: "";
          // bottom: calc(50% - 8px);
          // left: -16px;
          top: calc(50% - 2px);
          left: calc(50% - 5px);
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-top: 5px solid #fff;
        }
      }
      .finish-center-round {
        background: $finish-5;
      }
      .active-center-round {
        background: $active-5;
      }
      .wait-center-round {
        background: $wait-5;
      }
    }
    .name {
      height: 40px;
      line-height: 40px;
      margin-left: 15px;
      width: 100%;
    }
    .active-name {
      background: $active;
      padding: 0px 8px;
      color: #fff;
      border-radius: 4px;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        bottom: calc(50% - 8px);
        left: -16px;
        border-right: 8px solid $active;
        border-left: 8px solid transparent;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }
}
</style>
